<template>
  <el-dialog  title="详情" :fullscreen="true" :visible.sync="visible">
    <div style="margin: 0px 18%; padding: 20px 10px;">
<!--      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="表单基本信息" name="first"></el-tab-pane>
        <el-tab-pane label="表单布局" name="second"></el-tab-pane>
        <el-tab-pane label="表单列表定义" name="third"></el-tab-pane>
      </el-tabs>-->
      <el-header>
        <el-steps :active="active" align-center>
          <el-step title="表单基本信息" description=""></el-step>
          <el-step title="表单布局" description=""></el-step>
          <el-step title="表单列表定义" description=""></el-step>
        </el-steps>
      </el-header>
    </div>
    <el-main>
      <div v-if="stepVisable1" style="margin: 0px 22%; padding: 20px 10px; background: rgb(247 247 247)">
        <el-container>
          <el-main>
            <el-form ref="appForm" :model="formData" label-width="180px">
              <el-form-item label="应用名称">
                <el-select v-model="formData.appId" filterable remote reserve-keyword placeholder="请输入关键词"
                  :remote-method="remoteMethod"
                  :loading="loading">
                  <el-option v-for="item in appOptions" :key="item.appId" :label="item.appName" :value="item.appId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="表单名称">
                <el-input v-model="formData.formName"></el-input>
              </el-form-item>
              <el-form-item label="表名">
                <el-input v-model="formData.tableName"></el-input>
              </el-form-item>
              <el-form-item label="模块名称(英文驼峰)">
                <el-input v-model="formData.moudleName"></el-input>
              </el-form-item>
            </el-form>
          </el-main>
          <el-footer>
              <el-button type="primary" size="small" @click="onSubmit()">{{saveBtnText}}</el-button>
              <el-button type="primary" size="small" plain @click="nextStep()">下一步</el-button>
          </el-footer>
        </el-container>
      </div>
      <div v-if="stepVisable2" style="margin: 0px 22%; padding: 20px 0px; background: rgb(247 247 247)">
        <el-container>
          <el-main>
            <div>
              <div class="layout-item" v-for="item in formLayouts" :key="item.layoutId">
                <el-row>
                  <el-col :span="16">{{item.layoutName}}</el-col>
                  <el-col :span="8" style="text-align: right">
                    <router-link :to="{path:'/layout-manage', query:{id:item.layoutId}}" target="_blank">编辑
                    </router-link>
                    <router-link :to="{path:'/layout-manage1', query:{id:item.layoutId}}" target="_blank">编辑
                    </router-link>
                    <router-link :to="{path:'/field-manage', query:{id:item.layoutId, formId:formData.formId}}" target="_blank">编辑字段
                    </router-link>
                    <router-link :to="{path:'/code-construction', query:{id:item.layoutId, formId:formData.formId}}" target="_blank">代码构建
                    </router-link>
                    <el-link type="primary" @click="editFormLayout(item.layoutId)">编辑</el-link>
                    <el-link type="primary">删除</el-link>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-main>
          <el-footer>
            <el-button type="primary" size="small" @click="addNewLayout()">新增布局</el-button>
            <el-button type="primary" size="small" plain @click="pervStep()">上一步</el-button>
            <el-button type="primary" size="small" plain @click="nextStep()">下一步</el-button>
          </el-footer>
        </el-container>
      </div>
      <div v-if="stepVisable3" style="margin: 0px 22%; padding: 20px 10px; background: rgb(247 247 247)">
        <el-container>
          <el-main>

          </el-main>
          <el-footer>
            <el-button type="primary" size="small" plain @click="pervStep">上一步</el-button>
          </el-footer>
        </el-container>
      </div>
    </el-main>

    <!--弹窗-->
    <editLayout v-if="editLayoutVisible" ref="editLayout" @refreshDataList="getFormInfo"></editLayout>

  </el-dialog>
</template>

<script>
  import EditLayout from './editLayout'
    export default {
      name: 'addForm',
      data () {
        return {
          formData: {
            appName: '',
            formName: '',
            tableName: '',
            formId: '',
            moudleName: '',
            appId: ''
          },
          active: 0,
          saveBtnText: '保存',
          activeName: 'first',
          stepVisable1: true,
          stepVisable2: false,
          stepVisable3: false,
          visible: false,
          editLayoutVisible: false,
          loading: false,
          appOptions: [],
          formLayouts: [],
          rules: {
            formName: [
              {required: true, message: '请输入表单名称', trigger: 'blur'},
              {min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur'}
            ],
            tableName: [
              {required: true, message: '请输入表名', trigger: 'blur'},
              {min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur'}
            ],
            moudleName: [
              {required: true, message: '请输入模块名称', trigger: 'blur'},
              {min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur'}
            ]
          }
        }
      },
      components: {
        EditLayout
      },
      activated () {
        this.init()
        this.stepVisable1 = true
      },
      methods: {
        init (id) {
          console.log(id)
          if (id !== undefined) {
            this.formData.formId = id
            this.saveBtnText = '更新'
          }
          this.visible = true
          this.initAppList()
          this.$nextTick(() => {
            if (this.formData.formId) {
              this.getFormInfo(this.formData.formId)
            };
          })
        },
        onSubmit () {
          this.$refs['appForm'].validate((valid) => {
            if (valid) {
              this.$http({
                url: this.$http.adornUrl('/form/saveFormBase'),
                method: 'post',
                params: this.$http.adornParams({
                  'moudleName': this.formData.moudleName,
                  'tableName': this.formData.tableName,
                  'formName': this.formData.formName,
                  'formId': this.formData.formId,
                  'appId': this.formData.appId
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '保存成功',
                    type: 'success'
                  })
                  this.formData.formId = data.data
                }
              })
            } else {
              this.$message.error('error')
              console.log('error submit!!')
              return false
            }
          })
        },
        getFormInfo (id) {
          this.$http({
            url: this.$http.adornUrl('/form/getFormBaseInfo'),
            method: 'post',
            params: this.$http.adornParams({
              'formId': this.formData.formId
            }, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.formLayouts = data.data.formLayoutList
              this.formData.appName = data.data.formBase.appName
              this.formData.formName = data.data.formBase.formName
              this.formData.tableName = data.data.formBase.tableName
              this.formData.moudleName = data.data.formBase.moudleName
              this.formData.appId = data.data.formBase.appId
            }
          })
        },
        handleClick () {
          console.log(this.active)
          if (this.active === 0) {
            this.stepVisable1 = true
            this.stepVisable2 = false
            this.stepVisable3 = false
            this.initAppList()
          } else if (this.active === 1) {
            this.stepVisable2 = true
            this.stepVisable3 = false
            this.stepVisable1 = false
          } else if (this.active === 2) {
            this.stepVisable3 = true
            this.stepVisable1 = false
            this.stepVisable2 = false
          }
        },
        remoteMethod (query) {
          if (query !== '') {
            this.loading = true
            setTimeout(() => {
              this.$http({
                url: this.$http.adornUrl('/app/getAppListByQuery'),
                method: 'post',
                params: this.$http.adornParams({
                  'appName': query
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.appOptions = data.data
                }
              })
              this.loading = false
            }, 200)
          } else {
          }
        },
        initAppList () {
          console.log('初始化应用数据')
          this.$http({
            url: this.$http.adornUrl('/app/getAppListByQuery'),
            method: 'post',
            params: this.$http.adornParams({})
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.appOptions = data.data
            }
          })
        },
        addNewLayout () {
          if (!this.formData.formId) {
            this.$message.error('请先保存表单信息')
          } else {

          }
        },
        editFormLayout (id) {
          this.editLayoutVisible = true
          this.$nextTick(() => {
            this.$refs.editLayout.init(id)
          })
        },
        nextStep () {
          if (this.active++ >= 2) this.active = 2
          this.handleClick()
        },
        pervStep () {
          if (this.active-- <= 0) this.active = 0
          this.handleClick()
        }
      }
    }
</script>

<style>
  .el-step__head{
    margin-top: 6px !important;
  }
  .el-steps--simple{
    padding: 6px 8% !important;
    margin-top: 2px !important;
  }
  .el-dialog__body{
    padding: 0px !important;
  }
  .form-step {
    cursor: pointer;

  }
  .layout-item{
    padding: 10px 10px;
    background: #fbfbfb;
    /* margin-bottom: 10px; */
    border-bottom: 1px dashed #e8e8e8;
    cursor: pointer;
  }
  .layout-item:hover{
    background: #ffffff;
    border: 1px dashed #e1e1e1;
  }
  .el-main{
    padding: 10px 3px;
  }
  .el-container.is-vertical {
    height: 400px;
    overflow: auto;
  }
</style>
